<template>
    <div>
        <div class="logo-container">
            <img src="@/assets/logo.gif" alt="os-easy">
        </div>
        <group>
            <x-input
                v-model="form.emails"
                is-type="email"
                title="邮箱"
                placeholder="请输入您登记的邮箱地址"
            >
                <x-button
                    @click.native="onSendVerifyCodeBtnClick"
                    :disabled="!form.emails || !!sendVerifyCodeTime"
                    mini
                    slot="right"
                >{{sendVerifyCodeBtnText}}
                </x-button>
            </x-input>
            <x-input
                v-model="form.ver_code"
                title="验证码"
                placeholder="请输入您收到的验证码"
            />
        </group>
        <group style="padding: 0 1rem;">
            <x-button
                :disabled="!(form.emails && form.ver_code.length === 5)"
                @click.native="onLoginBtnClick"
                type="primary"
            >登录
            </x-button>
        </group>
    </div>
</template>

<script>
    import {Group, XButton, XInput} from 'vux';

    export default {
        name: 'Login',

        components: {
            Group,
            XInput,
            XButton
        },

        data() {
            return {
                sendVerifyCodeTime: 0,
                sendVerifyCodeBtnText: '发送验证码',
                form: {
                    emails: '',
                    ver_code: ''
                }
            };
        },

        methods: {
            // 点击发送验证码按钮
            onSendVerifyCodeBtnClick() {
                this.$API.applicantRegister.getVerifyCode(this.form.emails)
                    .then(() => {
                        this.setVerifyCodeCountdown();
                    }, () => {
                    });
            },

            // 设置发送验证码倒计时
            setVerifyCodeCountdown() {
                this.sendVerifyCodeTime = 60;
                this.sendVerifyCodeBtnText = this.sendVerifyCodeTime + ' s';

                this.sendVerifyCodeTimer = setInterval(() => {
                    this.sendVerifyCodeTime--;
                    if (this.sendVerifyCodeTime > 0) {
                        this.sendVerifyCodeBtnText = this.sendVerifyCodeTime + ' s';
                    } else {
                        this.sendVerifyCodeBtnText = '发送验证码';
                        clearInterval(this.sendVerifyCodeTimer);
                    }
                }, 1000);
            },

            // 登录
            onLoginBtnClick() {
                this.$API.applicantRegister.applicantVerification(this.form)
                    .then(resp => {
                        if (resp) {
                            this.$router.push({path: '/resume'});
                        }
                    }, () => {
                    });
            }
        }
    };
</script>

<style lang="less" scoped>
    .logo-container {
        text-align: center;
        padding-top: 2rem;
    }
</style>